<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>每日优鲜</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
  <link rel="stylesheet" href="css/swiper.min.css">
  <link rel="stylesheet" href="css/style.css">

</head>
<body>
<div id="top">
  <img src="images/top.png" class="addr">
  <img src="images/search.png" class="search">
  <div class="swiper-container" id="nav">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <span style="color:rgba(255,72,145,1);">热卖</span></div>
      <div class="swiper-slide">
        <span>水果</span></div>
      <div class="swiper-slide">
        <span>乳品</span></div>
      <div class="swiper-slide">
        <span>零食</span></div>
      <div class="swiper-slide">
        <span>肉蛋</span></div>
      <div class="swiper-slide">
        <span>蔬菜</span></div>
      <div class="swiper-slide">
        <span>酒饮</span></div>
      <div class="swiper-slide">
        <span>速食</span></div>
      <div class="swiper-slide">
        <span>熟食</span></div>
      <div class="swiper-slide">
        <span>水产</span></div>
      <div class="swiper-slide">
        <span>粮油</span></div>
      <div class="swiper-slide">
        <span>轻食</span></div>
      <div class="swiper-slide">
        <span>火锅</span></div>
      <div class="swiper-slide">
        <span>日百</span></div>
      <div class="bar">
        <div class="color"></div>
      </div>
    </div>
  </div>
</div>
<div class="swiper-container" id="page">
  <div class="swiper-wrapper">
    <div class="swiper-slide slidepage">
      <div class="swiper-container scroll">
        <div class="swiper-wrapper">
          <div class="swiper-slide slidescroll">
            <div class="swiper-container banner">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <img src="uploads/banner1.jpg"></div>
                <div class="swiper-slide">
                  <img src="uploads/banner2.jpg"></div>
                <div class="swiper-slide">
                  <img src="uploads/banner3.jpg"></div>
              </div>
              <div class="swiper-pagination"></div>
            </div>
            <div class="img">
              <img src="images/index1.png">
              <img src="images/hot.png"></div>
            <ul class="img">
              <li>
                <img src="uploads/product1.png"></li>
              <li>
                <img src="uploads/product2.png"></li>
              <li>
                <img src="uploads/product3.png"></li>
              <li>
                <img src="uploads/product4.png"></li>
              <li>
                <img src="uploads/product5.png"></li>
              <li>
                <img src="uploads/product3.png"></li>
              <li>
                <img src="uploads/product4.png"></li>
              <li>
                <img src="uploads/product5.png"></li>
              <li>
                <img src="uploads/product3.png"></li>
              <li>
                <img src="uploads/product4.png"></li>
              <li>
                <img src="uploads/product5.png"></li>
              <li>
                <img src="uploads/product3.png"></li>
              <li>
                <img src="uploads/product4.png"></li>
              <li>
                <img src="uploads/product5.png"></li>
            </ul>
            <div class="img">
              <img src="images/bottom.png"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="swiper-slide slidepage">
      <div class="swiper-container scroll">
        <div class="swiper-wrapper">
          <div class="swiper-slide slidescroll">
            <div class="swiper-container banner">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <img src="uploads/banner1.jpg"></div>
                <div class="swiper-slide">
                  <img src="uploads/banner2.jpg"></div>
                <div class="swiper-slide">
                  <img src="uploads/banner3.jpg"></div>
              </div>
              <div class="swiper-pagination"></div>
            </div>
            <div class="img">
              <img src="images/hot.png"></div>
            <ul class="img">
              <li>
                <img src="uploads/product1.png"></li>
              <li>
                <img src="uploads/product2.png"></li>
              <li>
                <img src="uploads/product3.png"></li>
              <li>
                <img src="uploads/product4.png"></li>
              <li>
                <img src="uploads/product5.png"></li>
              <li>
                <img src="uploads/product3.png"></li>
              <li>
                <img src="uploads/product4.png"></li>
              <li>
                <img src="uploads/product5.png"></li>
              <li>
                <img src="uploads/product3.png"></li>
              <li>
                <img src="uploads/product4.png"></li>
              <li>
                <img src="uploads/product5.png"></li>
              <li>
                <img src="uploads/product3.png"></li>
              <li>
                <img src="uploads/product4.png"></li>
              <li>
                <img src="uploads/product5.png"></li>
            </ul>
            <div class="img">
              <img src="images/bottom.png"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="swiper-slide slidepage">
      <div class="swiper-container scroll">
        <div class="swiper-wrapper">
          <div class="swiper-slide slidescroll">slide3</div>
        </div>
      </div>
    </div>
    <div class="swiper-slide slidepage">
      <div class="swiper-container scroll">
        <div class="swiper-wrapper">
          <div class="swiper-slide slidescroll">slide4</div>
        </div>
      </div>
    </div>
    <div class="swiper-slide slidepage">
      <div class="swiper-container scroll">
        <div class="swiper-wrapper">
          <div class="swiper-slide slidescroll">slide5</div>
        </div>
      </div>
    </div>
    <div class="swiper-slide slidepage">
      <div class="swiper-container scroll">
        <div class="swiper-wrapper">
          <div class="swiper-slide slidescroll">slide6</div>
        </div>
      </div>
    </div>
    <div class="swiper-slide slidepage">
      <div class="swiper-container scroll">
        <div class="swiper-wrapper">
          <div class="swiper-slide slidescroll">slide7</div>
        </div>
      </div>
    </div>
    <div class="swiper-slide slidepage">
      <div class="swiper-container scroll">
        <div class="swiper-wrapper">
          <div class="swiper-slide slidescroll">slide8</div>
        </div>
      </div>
    </div>
    <div class="swiper-slide slidepage">
      <div class="swiper-container scroll">
        <div class="swiper-wrapper">
          <div class="swiper-slide slidescroll">slide9</div>
        </div>
      </div>
    </div>
    <div class="swiper-slide slidepage">
      <div class="swiper-container scroll">
        <div class="swiper-wrapper">
          <div class="swiper-slide slidescroll">slide10</div>
        </div>
      </div>
    </div>
    <div class="swiper-slide slidepage">
      <div class="swiper-container scroll">
        <div class="swiper-wrapper">
          <div class="swiper-slide slidescroll">slide11</div>
        </div>
      </div>
    </div>
    <div class="swiper-slide slidepage">
      <div class="swiper-container scroll">
        <div class="swiper-wrapper">
          <div class="swiper-slide slidescroll">slide12</div>
        </div>
      </div>
    </div>
    <div class="swiper-slide slidepage">
      <div class="swiper-container scroll">
        <div class="swiper-wrapper">
          <div class="swiper-slide slidescroll">slide13</div>
        </div>
      </div>
    </div>
    <div class="swiper-slide slidepage">
      <div class="swiper-container scroll">
        <div class="swiper-wrapper">
          <div class="swiper-slide slidescroll">slide14</div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="img" id="footer"><img src="images/footer.png"></div>

<script src="js/swiper.min.js"></script>
<script>
    //暂时设计每个slide大小需要一致
    barwidth = 36; //导航粉色条的长度px
    tSpeed = 300; //切换速度300ms
    var navSwiper = new Swiper('#nav', {
        slidesPerView: 6,
        freeMode: true,
        on: {
            init: function () {
                navSlideWidth = this.slides.eq(0).css('width'); //导航字数需要统一,每个导航宽度一致
                bar = this.$el.find('.bar');
                bar.css('width', navSlideWidth);
                bar.transition(tSpeed);
                navSum = this.slides[this.slides.length - 1].offsetLeft; //最后一个slide的位置

                clientWidth = parseInt(this.$wrapperEl.css('width')); //Nav的可视宽度
                navWidth = 0;
                for (i = 0; i < this.slides.length; i++) {
                    navWidth += parseInt(this.slides.eq(i).css('width'));
                }

                topBar = this.$el.parents('body').find('#top'); //页头

            },
        },
    });

    var pageSwiper = new Swiper('#page', {
        watchSlidesProgress: true,
        resistanceRatio: 0,
        on: {
            touchMove: function () {
                progress = this.progress;
                bar.transition(0);
                bar.transform('translateX(' + navSum * progress + 'px)');
                //粉色255,72,145灰色51,51,51
                for (i = 0; i < this.slides.length; i++) {
                    slideProgress = this.slides[i].progress;
                    if (Math.abs(slideProgress) < 1) {
                        r = Math.floor((255 - 51) * (1 - Math.pow(Math.abs(slideProgress), 2)) + 51);
                        g = Math.floor((72 - 51) * (1 - Math.pow(Math.abs(slideProgress), 2)) + 51);
                        b = Math.floor((145 - 51) * (1 - Math.pow(Math.abs(slideProgress), 2)) + 51);
                        navSwiper.slides.eq(i).find('span').css('color', 'rgba(' + r + ',' + g + ',' + b + ',1)');
                    }
                }
            },
            transitionStart: function () {
                activeIndex = this.activeIndex;
                activeSlidePosition = navSwiper.slides[activeIndex].offsetLeft;
                //释放时导航粉色条移动过渡
                bar.transition(tSpeed);
                bar.transform('translateX(' + activeSlidePosition + 'px)');
                //释放时文字变色过渡
                navSwiper.slides.eq(activeIndex).find('span').transition(tSpeed);
                navSwiper.slides.eq(activeIndex).find('span').css('color', 'rgba(255,72,145,1)');
                if (activeIndex > 0) {
                    navSwiper.slides.eq(activeIndex - 1).find('span').transition(tSpeed);
                    navSwiper.slides.eq(activeIndex - 1).find('span').css('color', 'rgba(51,51,51,1)');
                }
                if (activeIndex < this.slides.length) {
                    navSwiper.slides.eq(activeIndex + 1).find('span').transition(tSpeed);
                    navSwiper.slides.eq(activeIndex + 1).find('span').css('color', 'rgba(51,51,51,1)');
                }
                //导航居中
                navActiveSlideLeft = navSwiper.slides[activeIndex].offsetLeft; //activeSlide距左边的距离

                navSwiper.setTransition(tSpeed);
                if (navActiveSlideLeft < (clientWidth - parseInt(navSlideWidth)) / 2) {
                    navSwiper.setTranslate(0);
                } else if (navActiveSlideLeft > navWidth - (parseInt(navSlideWidth) + clientWidth) / 2) {
                    navSwiper.setTranslate(clientWidth - navWidth);
                } else {
                    navSwiper.setTranslate((clientWidth - parseInt(navSlideWidth)) / 2 - navActiveSlideLeft);
                }

            },
        }
    });

    navSwiper.$el.on('touchstart', function (e) {
        e.preventDefault(); //去掉按压阴影
    });
    navSwiper.on('tap', function (e) {

        clickIndex = this.clickedIndex;
        clickSlide = this.slides.eq(clickIndex);
        pageSwiper.slideTo(clickIndex, 0);
        this.slides.find('span').css('color', 'rgba(51,51,51,1)');
        clickSlide.find('span').css('color', 'rgba(255,72,145,1)');
    });

    //内容滚动
    var scrollSwiper = new Swiper('.scroll', {
        //65是头部的高
        //36是top地址和搜索的高

        slidesOffsetBefore: 72,
        direction: 'vertical',
        freeMode: true,
        slidesPerView: 'auto',

        mousewheel: {
            releaseOnEdges: true,
        },
        on: {
            touchMove: function () {

                if (this.translate > 72 - 36 && this.translate < 72) {
                    topBar.transform('translateY(' + (this.translate - 72) + 'px)');
                }

            },
            touchStart: function () {
                startPosition = this.translate;
            },
            touchEnd: function () {
                topBar.transition(tSpeed);
                if (this.translate > 36 && this.translate < 72 && this.translate < startPosition) {
                    topBar.transform('translateY(-36px)');
                    for (sc = 0; sc < scrollSwiper.length; sc++) {
                        if (scrollSwiper[sc].translate > 36) {
                            scrollSwiper[sc].setTransition(tSpeed);
                            scrollSwiper[sc].setTranslate(36);
                        }
                    }
                }
                if (this.translate > 36 && this.translate < 72 && this.translate > startPosition) {
                    topBar.transform('translateY(0px)');
                    for (sc = 0; sc < scrollSwiper.length; sc++) {
                        if (scrollSwiper[sc].translate < 72 && scrollSwiper[sc].translate > 0) {
                            scrollSwiper[sc].setTransition(tSpeed);
                            scrollSwiper[sc].setTranslate(72);
                        }
                    }
                }
            },

            transitionStart: function () {

                topBar.transition(tSpeed);
                if (this.translate < 72 - 36) {
                    topBar.transform('translateY(-36px)');
                    if (scrollSwiper) {
                        for (sc = 0; sc < scrollSwiper.length; sc++) {
                            if (scrollSwiper[sc].translate > 36) {
                                scrollSwiper[sc].setTransition(tSpeed);
                                scrollSwiper[sc].setTranslate(36);
                            }
                        }
                    }

                } else {
                    topBar.transform('translateY(0px)');

                    if (scrollSwiper) {
                        for (sc = 0; sc < scrollSwiper.length; sc++) {
                            if (scrollSwiper[sc].translate < 72 && scrollSwiper[sc].translate > 0) {
                                scrollSwiper[sc].setTransition(tSpeed);
                                scrollSwiper[sc].setTranslate(72);
                            }
                        }
                    }
                }
            },
        }

    });
    //热卖
    var bannerSwiper = new Swiper('.banner', {
        loop: true,
        pagination: {
            el: '.swiper-pagination',
            type: 'fraction',
            renderFraction: function (currentClass, totalClass) {
                return '<span class="' + currentClass + '"></span>' + '/' + '<span class="' + totalClass + '"></span>';
            },
        },
    });
</script>
</body>
</html>
